<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
            <el-breadcrumb-item>文章列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input placeholder="请输文章关键字" clearable v-model="aname" @clear="searchArticle">

                    </el-input>
                </el-col>
                <el-col :span="4">
                  <el-input placeholder="请输入用户名" clearable v-model="uname" @clear="searchArticle">
                  </el-input>
                </el-col>
              <el-col :span="4">
                <el-select placeholder="请选择文章状态" clearable v-model="status" @clear="searchArticle">
                  <el-option label="草稿" value="0"></el-option>
                  <el-option label="已发布" value="1"></el-option>
                  <el-option label="待审核" value="2"></el-option>
                  <el-option label="未通过" value="3"></el-option>
                </el-select>
              </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="searchArticle">搜索</el-button>
                </el-col>
            </el-row>
            <el-table :data="articleList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="简介" prop="summary"></el-table-column>
                <el-table-column label="作者" prop="user.username"></el-table-column>
                <el-table-column label="分类" prop="category.name"></el-table-column>
<!--                <el-table-column label="权限列表" >-->
<!--                  <template slot-scope="scope">-->
<!--                    <span v-for="p in scope.row.permissionNames" v-text="p+' '"></span>-->
<!--                  </template>-->
<!--                </el-table-column>-->


              <el-table-column label="是否推荐">
                <template slot-scope="scope">
                  <span v-if="scope.row.weight=='1'" style='color: red'>推荐</span>
                  <span v-if="scope.row.weight=='0'" style='color: greenyellow'>普通</span>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status=='0'" style='color: skyblue'>草稿</span>
                  <span v-if="scope.row.status=='1'" >已发布</span>
                  <span v-if="scope.row.status=='2'" style='color: greenyellow'>待审核</span>
                  <span v-if="scope.row.status=='3'" style='color: red'>未通过</span>
                </template>
              </el-table-column>
              <el-table-column label="评论数" prop="commentCount" min-width="50%"></el-table-column>
              <el-table-column label="浏览数" prop="viewCount" min-width="50%"></el-table-column>
              <el-table-column label="点赞数" prop="likeCount" min-width="50%"></el-table-column>
                <el-table-column label="操作"
                                 min-width="180%">
                    <template slot-scope="scope">
                        <el-button type="primary"  size="small" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="success" size="small" icon="el-icon-top" circle  v-if="scope.row.weight==0" @click="changeWeight(scope.row.id,1)"></el-button>
                        <el-button type="danger" size="small" icon="el-icon-bottom" circle  v-if="scope.row.weight==1" @click="changeWeight(scope.row.id,0)"></el-button>
                        <el-button type="primary"  size="small"  @click="showArticleContentDialog(scope.row)">编辑</el-button>
                        <el-button type="danger"  size="small"  @click="removeArticleById(scope.row.id)">删除</el-button>
                        <el-button type="warning"  size="small"  @click="changeStatus(scope.row)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--审核文章-->
      <el-dialog title="审核文章" :visible.sync="changeStatusDialogVisible" width="50%" @close="changeStatusDialogVisible = false;this.$refs.changeStatusFormRef.resetFields()">
        <el-form
            :model="changeStatusForm"
            ref="changeStatusFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="结果" prop="status">
            <el-radio v-model="changeStatusForm.status" :label=1>通过</el-radio>
            <el-radio v-model="changeStatusForm.status" :label=3>不通过</el-radio>

          </el-form-item>
          <el-form-item label="备注" prop="result">
            <el-input type="textarea" v-model="changeStatusForm.result"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveChangeStatus">确 定</el-button>
                <el-button @click="changeStatusDialogVisible = false">取 消</el-button>
            </span>
      </el-dialog>
        <el-dialog title="修改文章信息" :visible.sync="editDialogVisible" width="70%" @close="editArticleFormClose">
            <el-form
                    :model="editArticleForm"
                    :rules="editArticleFormRules"
                    ref="editArticleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="标题" prop="title">
                    <el-input v-model="editArticleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="介绍" prop="summary">
                  <el-input type="textarea" v-model="editArticleForm.summary"></el-input>
                </el-form-item>
<!--                <el-form-item label="分类" prop="category.name">-->
<!--                  <el-input v-model="editArticleForm.category.name"></el-input>-->
<!--                </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editArticle">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!--编辑文章内容-->
        <el-dialog
                :title="this.editArticleTitle"
                :visible.sync="editArticleContentDialogVisible"
                width="70%"
                @close="editArticleContentFormClose"
                :close-on-click-modal=false
        >
              <el-input type="hidden" v-model="editArticleBodyId"></el-input>
              <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :defaultConfig="toolbarConfig"
                  :mode="mode"
              />
              <Editor
                  style="height: 500px; overflow-y: hidden;text-align: left"
                  v-model="html"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onCreated="onCreated"
              />


            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editArticleContent">确 定</el-button>
                <el-button @click="editArticleContentDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
  import Vue from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default Vue.extend({
      components: { Editor, Toolbar },

      data() {
            return {
                //富文本相关
                editor: null,
                html: '',
                toolbarConfig: { },
                editorConfig: { placeholder: '请输入内容...' },
                mode: 'default', // or 'simple'

                addDialogVisible: false,
                editDialogVisible: false,
                changeStatusDialogVisible: false,
                changeStatusForm:{
                  articleId:'',
                  status:1,
                  result:''
                },
                editArticleContentDialogVisible:false,
                editArticleBodyId:'',
                editArticleTitle:'',
                pageNum: 1,
                pageSize: 5,
                aname:'',
                uname:'',
                status:'',
                articleList:[],
                categoryList: [],
                total: 0,
                addArticleForm: {
                    title:'',
                },
                editArticleForm: {
                    id: -1,
                    title: "",
                    summary:'',
                    bodyId:'',
                    body:{
                      id:'',
                      contentHtml:'',
                    },
                    authorId:'',
                    categoryId:'',
                    category:{
                      name:''
                    },
                    weight:'',
                },
                authorityForm:{
                  id:'',
                  name:'',
                  checkedIds:[]
                },

                authorityFormRules:{},
                menuList:[],
                defaultProps:{
                  children: 'children',
                  label: 'name'
                },
                editArticleFormRules:{

                },
                addArticleFormRules:{

                },
                defaultChekcedMenu:[]
            };
        },
        methods: {
            changeStatus(row){
              this.changeStatusDialogVisible = true;
              this.changeStatusForm.articleId = row.id;
              this.changeStatusForm.result = row.result;
              // this.changeStatusForm.status = row.status;
            },
            saveChangeStatus(){
              console.log(this.changeStatusForm);
              let url = 'article/changeStatus'
              this.$axios.post(url,null,{
                params:{
                  articleId:this.changeStatusForm.articleId,
                  status:this.changeStatusForm.status,
                  result:this.changeStatusForm.result
                }
              }).then(res=>{
                if(res.data.code == 200){
                  this.$message.success("审核成功")
                  this.$refs.changeStatusFormRef.resetFields();
                  this.changeStatusDialogVisible = false;
                  this.getArticleList();
                }
              })
            },
            onCreated(editor) {
              this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },

            // 删除文章信息
            removeArticleById(id) {
              this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(()=>{

                let url = 'article/del/'+id;
                this.$axios.delete(url)
                    .then(res=>{
                      if(res.data.code==200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        })
                        this.getArticleList();
                      }else {
                        this.$message({
                          type:'error',
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
              })
            },
            //添加角色
            showAddDialog(row) {
                this.addDialogVisible = true;
            },
            //编辑文章
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editArticleForm = JSON.parse(JSON.stringify(row));
                // console.log(row.body)
                this.html = row.body.contenthtml;

            },
            editArticle(){
                console.log(this.editArticleForm)
                let url = 'article/modifyArticle'
                this.$axios.put(url,this.editArticleForm)
                    .then(res=>{
                      if(res.data.code==200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        })
                        this.getArticleList();
                        this.editArticleFormClose();
                      }else {
                        this.$message({
                          type:'error',
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
            },
            editArticleFormClose() {
                this.editDialogVisible = false;
                this.$refs.editArticleFormRef.resetFields();
            },
            editArticleContentFormClose(){
              this.editArticleContentDialogVisible = false;
            },
            addRoleFormClose(){
              this.addDialogVisible = false;
              this.$refs.addArticleFormRef.resetFields();
            },
            showArticleContentDialog(row){
                this.editArticleContentDialogVisible = true;
                this.html = row.body.contenthtml;
                this.editArticleBodyId = row.body.id;
                this.editArticleTitle = row.title;
            },

            getArticleList() {
              let url = 'article/getArticlesByCons'
              this.$axios.get(url,{
                params:{
                  now: this.pageNum,
                  size: this.pageSize,
                  aname: this.aname,
                  uname: this.uname,
                  status: this.status
                }
              }).then(res=>{
                if(res.data.code == 200){
                  console.log(res)
                  this.articleList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            searchArticle() {
                this.pageNum = 1;
                this.pageSize = 5;
                this.getArticleList();
            },
            changeWeight(id,weight){
              let url = "article/changeWeight";
              this.$axios.get(url,{
                params:{
                  id:id,
                  weight:weight
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  });
                  this.getArticleList();
                }else {
                  this.$message({
                    message:res.data.msg,
                    type:"error",
                    duration:1000
                  })
                }
              })
            },
            editArticleContent(){
                console.log(this.editor.getHtml())
                let url = 'article/modifyContent';
                this.$axios.get(url,{
                  params:{
                    bid:this.editArticleBodyId,
                    html:this.editor.getHtml(),
                  }
                }).then(res=>{
                    if(res.data.code==200){
                      this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1000
                      })
                      this.getArticleList();
                      this.editArticleContentDialogVisible =false;
                    }
                })
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getArticleList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getArticleList();
            },


        },
        created() {
            this.searchArticle();

        },
        beforeDestroy() {
          const editor = this.editor
          if (editor == null) return
          editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    });
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
</style>
